<template >
  <!-- 服务管理 -->
  <div class="innerPageTable-box-OneTwo value-set-list-wrap innerPageTable-out-flex">
    <span class="title">{{typeName}}</span>
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="serviceForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >

        <Form-item prop="vsCode" :label="'业务单元'">
          <Select filterable clearable v-model="searchForm.name">
            <Option @click.native="codeChange(item)" v-for="item in bussinessUnit" :value="item.trgNode" :key="item.trgNode">{{
              item.trgNode
            }}</Option>
          </Select>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchValueSet()" />
        </Form-item>
        <RPButton v-if="hasPermission('CHECK_COLLECT_REPORT') && id == 1" optType="create" type="info" @click="allStatementsHandle()" text='汇总报表'/>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="valueSetTable" :config="pageTableConfig">
    </InnerPageTable>
    <Modal
        v-model="targetDisplay"
        title="导出向导"
        :loading='targetLoadding'
        @on-ok="targetYearDownLoadFun"
        @on-cancel="targetDisplay = false">
        <p>请选择目标表导出年度</p>
        <Form :model="targetForm" ref="targetForm" :rules='targetRules'>
          <Form-item prop='year' label='目标年度：' :label-width="110">
            <Select v-model="targetForm.year" palceholder='请选择目标年度' >
              <Option v-for="item in targetYearsOptions" :key="item.value" :value="item.value">{{ item.text }}</Option>
            </Select>
          </Form-item>
        </Form>
    </Modal>
  </div>
</template>

<script>
import { managemantColumns, managemantColumns2 } from './columns'
import planData from './planData.vue'
import viewReport from './viewReport.vue'
import businessData from './businessData.vue'
import viewReportStatistic from './viewReportStatistic.vue'
import coverApi from '@/api/cover.js'
import { excludeHiddenBussinessUnit } from '@/tools/common.js'
import permission from '@/mixin/permission'
import gantt from '@/mixin/gantt'
import { GANTT_TYPE_NOT_SHOW_BUSSINESS_UNIT } from './const.js'
export default {
  name: 'managementPage',
  mixins: [ permission, gantt ],
  props: {
    type: {
      default: 0,
      type: Number,
    },
    id: {
      default: 0,
      type: Number,
    },
    typeName: {
      default: '',
      type: String,
    },
    oldTypeName: {
      default: '',
      type: String,
    }
  },
  data() {
    return {
      searchForm: {
        name: '',
        type: this.oldTypeName
      },
      targetYearsOptions: [
        {text: '2021', value: '2021'},
        {text: '2022', value: '2022'},
        {text: '2023', value: '2023'},
        {text: '2024', value: '2024'},
        {text: '2025', value: '2025'}
      ],
      targetDisplay: false,
      targetLoadding: true,
      targetForm: {
        row: undefined,
        year: ''
      },
      targetRules: { year: [{required: true, message: "请选择目标年度", trigger: "change"}] },
      pageTableConfig: {
        loadDataFn: this.getServiceList,
        columns: this.oldTypeName == '数字化转型专项实施方案任务表' ? managemantColumns.bind(this)() : managemantColumns2.bind(this)(),
        autoFirst: false, //默认 就是 false, 要配置在这里
        pageSize: 50
      },
      bussinessUnit: [],
    }
  },
  computed: {},
  created: function () {},
  beforeMount: function () {},
  mounted: function () {
    coverApi.getRptReportTrgnodePList({reportName: this.oldTypeName}).then(res => {
      this.bussinessUnit = res.data.data
      // 关键业务环节数字化覆盖度
      if (this.id == 2) {
        this.bussinessUnit = excludeHiddenBussinessUnit(this.bussinessUnit)
      }
      this.searchValueSet()
    })
  },
  beforeDestroy: function () {},
  destroyed: function () {},
  methods: {
    url(type, pathname) {
      return window.RPConfig[type] + pathname;
    },
    downLoadFun(row) {
      if (this.oldTypeName == '数字化转型专项实施方案任务表') {
        // 总任务表
        coverApi.downLoadFun({url: this.url('itShare', `/rptPlantask/listExport?trg_node=${row.trgNode}`)})
        // 工期图
        this.exportGantt({
          ganttType: GANTT_TYPE_NOT_SHOW_BUSSINESS_UNIT,
          trgNode: row.trgNode,
        })
        // coverApi.exportPDF({
        //   ganttType: GANTT_TYPE_NOT_SHOW_BUSSINESS_UNIT,
        //   trgNode: row.trgNode,
        // }).then(res => {
        //   const a = document.createElement("a");
        //   const blob = new Blob([res.data], { type: "image/jpeg;charset=utf-8" });
        //   a.href = URL.createObjectURL(blob);
        //   a.style.display = "none";

        //   a.download = row.trgNode + '-工期图';
        //   document.body.appendChild(a);
        //   a.click();
        //   document.body.removeChild(a);
        // })
      } else {
        this.targetForm.row = row
        this.$refs.targetForm.resetFields()
        this.targetDisplay = true
      }
    },
    targetYearDownLoadFun() {
      const row = this.targetForm.row
      this.$refs.targetForm.validate((valid) => {
        if (valid) {
          coverApi.rptDgcalHrhxFindList({ trgNode: row.trgNode, reportCycle: this.targetForm.year }).then(res => {
            this.targetLoadding = false
            if (res.data.data.length > 0) {
              this.targetDisplay = false
              // 数字化覆盖率计算表
              coverApi.downLoadFun({url: this.url('itShare', `/rptDgCal/listExport?trg_node=${row.trgNode}`)})
              // 2022年数字化覆盖现状
              coverApi.downLoadFun({url: this.url('itShare', `/rptDgcalHrhxStatus/listExport?trg_node=${row.trgNode}`)})
              // “十四五”数字化覆盖目标
              coverApi.downLoadFun({url: this.url('itShare', `/rptDgcalHrhx/listExport?trg_node=${row.trgNode}&report_cycle=${this.targetForm.year}`)})
              this.targetForm.year = ''
              this.targetForm.row = undefined
            } else {
              this.$nextTick(() => {
                this.targetLoadding = true
              })
              this.$Message.error({
                content: `系统无此年度目标表，请选择其他年度目标表导出`,
                duration: 3
              })
            }
          }).catch(err => {
            this.$Message.error({
                content: err,
                duration: 3
              })
          })
        } else {
          this.targetLoadding = false
          this.$nextTick(() => {
            this.targetLoadding = true
          })
        }
      })
    },
    viewReport(row) {
      if (this.type == 1) {
        new this.$sidelipPage(
          viewReport,
          {
            props: {
              id: row.id || '',
              type: row.type,
              code: row.code,
              parentCode: row.parentCode,
              trgnode: row.trgNode,
              title: row.trgNode + '数字化转型专项实施方案任务表'
            },
          }
        );
      } else {
        new this.$sidelipPage(
          viewReportStatistic,
          {
            props: {
              id: row.id || '',
              type: row.type,
              trgnode: row.trgNode,
              title: row.trgNode + '关键业务环节数字化覆盖度'
            },
          }
        );
      }
    },
    allStatementsHandle() {
      new this.$sidelipPage(
        viewReport,
        {
          props: {
            trgnode: '',
            title: '数字化转型专项实施方案任务汇总表',
            isAll: true
          },
        }
      );
    },
    dataManagement(row) {
      if (this.type == 1) {
        new this.$sidelipPage(
          planData,
          {
            props: {
              id: row.id || '',
              type: row.type,
              code: row.trgnode,
              bussinessCode: row.trgNode,
              parentCode: row.parentCode,
              fromPage: "Summary"
            },
          }
        );
      } else {
        new this.$sidelipPage(
          businessData,
          {
            props: {
              id: row.id || '',
              type: row.type,
              fromPage: "Summary",
              bussinessCode: row.trgNode,
            },
          }
        );
      }
    },
    getServiceList: tableObj => {
      let { responseProcess, param } = tableObj
      let { pageNum, pageSize,  name = '', type = ''} = param

      coverApi.getRptReportTrgnode({
        currentPage: pageNum,
        pageSize,
        trgNode: name,
        reportName: type,
      }).then(res => {
        let {size, total, current, records, pages} = res.data.data
        responseProcess({
            pageNum: current,
            pageSize: size,
            pages: pages,
            records: records || [],
            total: total
          })
      })

    },
    //搜索
    searchValueSet() {
      this.$refs['valueSetTable'].load(this.searchForm)
    },
  },
  watch: {},
  directives: {}
}
</script>

<style lang="less" scoped>
.title {
  position: relative;
  top: 6px;
  font-size: 18px;
  font-weight: bold;
  padding-left: 14px;

}
/deep/.Status .disable {
    background-color: #b3afaf!important;
}
</style>
